<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学相关demo</title>
    <style>
        html,body,.container{
            width: 100%;
            height: 100%;
            margin:0;
            overflow: hidden;
        }
        .container{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <script type="importmap">
    {
        "imports": {
            "d3": "https://cdn.jsdelivr.net/npm/d3@7/+esm"
        }
    }
    </script>
    <script type="module" src="./math_demo.js"></script>
    <!-- <script type="module">
        import {
            select,
            line,
            curveBasis,
            path as d3Path,
        } from 'd3';
        const y = 100;
        const basicAngle = 5;
        const dist = 60;
        // 定义圆A的半径和坐标
        var radiusA = 50;
        var centerA = [100, y];

        // 定义圆B的半径和坐标
        var radiusB = 50;
        var centerB = [350, y];
        function calculateMidpoint(point1, point2,angle) {
            let offsetY = angle > 180 
                ? dist 
                : angle === 0
                    ? 0
                    : -dist;
            const a = angle > 180
                ? (360-angle) / basicAngle
                : angle / basicAngle;
            offsetY *= a;
            const midpointX = (point1.x + point2.x) / 2;
            const midpointY = (point1.y + point2.y) / 2;
            const dx = point2.x - point1.x;
            const dy = point2.y - point1.y;
            const lineLength = Math.sqrt(dx * dx + dy * dy);
            const unitDx = dx / lineLength;
            const unitDy = dy / lineLength;
            const verticalMidpointX = midpointX + unitDy * offsetY;
            const verticalMidpointY = midpointY - unitDx * offsetY;
            return { x: verticalMidpointX, y: verticalMidpointY };
        }
        const computeAngle = (unitAngle,current,count) => {
            if(count === 1) return 0;
            if(count % 2 === 0){
                const middle = count / 2+1;
                // 偶数
                if(current < middle){
                    return current* unitAngle;
                }else{
                    return 360-(current-middle+1)* unitAngle;
                }
            }else{
                // 寄数
                const middle = Math.floor(count / 2) + 1;
                if (current === middle) return 0;
                if (current < middle) {
                    return current * unitAngle;
                } else {
                    return 360 - (current - middle) * unitAngle;
                }
            }
        }
        function drawCurves(unitAngle, numCurves,colors=[]) {
                // 创建SVG画布
                var svg = select("div.container")
                    .append("svg")
                    .attr("width", '100%')
                    .attr("height", '100%');

                

                svg.append('circle')
                    .attr('r',radiusA)
                    .attr('cx', centerA[0])
                    .attr('cy', centerA[1])
                    .style('stroke','black')
                    .style('stroke-width',1)
                    .style('fill','white')

                svg.append('circle')
                    .attr('r', radiusB)
                    .attr('cx', centerB[0]+ radiusB)
                    .attr('cy', centerB[1])
                    .style('stroke', 'black')
                    .style('stroke-width', 1)
                    .style('fill', 'white')
                
                
                
                // 画曲线
                for (var i = 0; i < numCurves; i++) {
                    const color = colors[i] || "red";
                    // 计算当前曲线的起始角度和结束角度
                    var angle = computeAngle(unitAngle,i+1,numCurves);
                    var startAngleCur = angle;
                    var endAngleCur = angle;

                    // 计算曲线起始坐标
                    var start = [
                        centerA[0] + radiusA * Math.cos(startAngleCur * Math.PI / 180),
                        centerA[1] + radiusA * Math.sin(startAngleCur * Math.PI / 180)
                    ];

                    // 计算曲线结束坐标
                    var end = [
                        centerB[0] + radiusB * Math.cos(endAngleCur * Math.PI / 180),
                        centerB[1] + radiusB * Math.sin(endAngleCur * Math.PI / 180)
                    ];

                    // 计算曲线的控制点坐标
                    var cpointer = calculateMidpoint({x: start[0] ,y: start[1] }, { x: end[0], y: end[1] }, angle);
                    var control = [
                        cpointer.x,
                        cpointer.y
                    ];
                    // 曲线生成器
                    const path = d3Path();
                    path.moveTo(start[0], start[1]);
                    path.quadraticCurveTo(control[0], control[1], end[0], end[1]);
                    // 添加曲线路径
                    svg.append("path")
                        .attr("d", path)
                        .attr("fill", "none")
                        .attr("stroke", color)
                        .attr("marker-end", "url(#arrow)");
                }

                // 添加箭头
                svg.append("svg:defs")
                    .append("svg:marker")
                    .attr("id", "arrow")
                    .attr("viewBox", "0 -5 10 10")
                    .attr("refX", 8)
                    .attr("refY", 0)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("svg:path")
                    .attr("d", "M0,-5L10,0L0,5")
                    .attr("fill", 'red');
            }
            // 画3条曲线，每条曲线的角度增加20度
            drawCurves(basicAngle, 5,['red','green','blue','gray','black', 'red', 'green', 'blue', 'gray', 'black']);
    </script> -->
</body>
</html>